import React from 'react';
import { callbackArr } from './callback';
import { render as reactRender, unmount as reactUnmount } from 'rc-util/lib/React/render';
import xMessage from '../Message';
import { cloneDeep } from 'lodash';
import LoginModal from './LoginModal';
import './Login.scss';

import loginPanel from '../../assets/images/login_panel.png';
import loginWx from '../../assets/images/login_wx.png';
import loginPhone from '../../assets/images/login_phone.png';
import closeIcon from '../../assets/images/login-close.png';

// 默认key 一个key只能打开一个
function MaskLogin() {
  // 闭包管理弹出层状态 防止重复打开
  let openStatus = false;

  return (config) => {
    // 如果已经打开了 不渲染
    console.log('openStatus =======> ', openStatus);
    if (openStatus) {
      xMessage.pop({ type: 'warning', content: '弹窗已经打开了' });
      return;
    }
    // 设置状态
    openStatus = true;
    // 创建临时容器 卸载的时候 也要卸载它
    const container = document.createDocumentFragment();
    // 安装回调并移除config中的回调
    for (const cbKey in callbackArr) {
      // console.log('cbKey =======<> ', cbKey)
      const parameter = config[cbKey];
      if (parameter) {
        // 如果调用时传了回调
        callbackArr[cbKey] = parameter;
        // 删除config中的回调 防止key冲突
        delete config[cbKey];
      }
    }

    // currentConfig.loginType == 'phone' 默认为手机号登陆
    let currentConfig = {
      close,
      // 调用的时候 打开面板
      open: true,
      ...config,
    };

    // 异步渲染dom定时器
    let timeoutId = null;

    //关闭登录弹框
    function close() {
      // 配置参数
      currentConfig = {
        ...currentConfig,
        // 处理关闭时候的参数
        open: false,
      };
      // 重新渲染 关闭掉弹窗
      render();
      // 卸载组件
      requestAnimationFrame(() => {
        // 关闭时销毁组件
        destroy();
      });
    }

    // 销毁组件逻辑
    function destroy() {
      // 加延迟 让弹框动画执行完
      setTimeout(() => {
        reactUnmount(container);
        // 弹窗关闭后的钩子
        callbackArr.close();
        openStatus = false;
      }, 150);
    }

    // 切换登录方式
    function loginChange(type) {
      currentConfig.loginType = type;
      xMessage.pop({ type: 'warning', content: '登录方式以切换' });
      render();
    }

    // 渲染弹框
    function render(Initialize) {
      // 把弹窗做成异步的，请判断是否已经存在过
      let props = cloneDeep(currentConfig);
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        if (Initialize === 'mounted') {
          callbackArr.open();
        }
        // 渲染react组件
        reactRender(
          <LoginModal {...props}>
            <div className={'bodyContent'}>
              <div className={'leftContent'}>
                <img className={'images'} src={loginPanel} alt="" />
              </div>
              <div className={'rightContent'}>
                <div className={'contentHead'}>
                  登录后
                  <span className={'contentHeadSubtitle'}>立即学习！</span>
                  <img onClick={close} className={'closeIcons'} src={closeIcon} alt="" />
                </div>
                <div className={'contentBody'}>
                  {currentConfig.loginType == 'phone' ? <>手机号登陆</> : <>微信登陆</>}
                </div>

                <div className={'footer'}>
                  <div className={'loginService'}>
                    登录即同意
                    <a
                      href="http://iyunhe.com/app/yhzx/images/html/fwxy.html"
                      target="_blank"
                    >
                      《注册协议》
                    </a>
                    &
                    <a
                      href="http://iyunhe.com/app/yhzx/images/html/yszc.html"
                      target="_blank"
                    >
                      《隐私协议》
                    </a>
                  </div>
                  <div className={'switchover'}>
                    {currentConfig.loginType == 'phone' ? (
                      <div className={'hovebox'} onClick={() => loginChange('wx')}>
                        <img src={loginWx} alt="" />
                        <span>微信登录</span>
                      </div>
                    ) : (
                      <div className={'hovebox'} onClick={() => loginChange('phone')}>
                        <img src={loginPhone} alt="" />
                        <span>账号密码登录</span>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </LoginModal>,
          container
        );
      });
    }
    // first
    render('mounted');
  };
}

export default MaskLogin();
